<template>
  <div>
    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username" @blur.native.capture="checkCSCParam($event)"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="formLabelAlign.password"
          placeholder="输入不小于6位数密码"
          :type="passForm.show.new?'text':'password'"
        ></el-input>
        <!-- 密码显示小眼睛图标 -->

        <img
          :src="passForm.show.old?'../access/img/open.png':'../access/img/off.png'"
          slot="suffix"
          @click="passForm.show.old=!passForm.show.old"
        />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="formLabelAlign.tel"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="submit" @click.prevent="submitForm($event)">提交</el-button>
        <el-button @click="reset" type="reset">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import php from '../api/php.js';

export default {
  name: "User_add",
  data() {
    return {
      name: "",
      age: "",
      labelPosition: "right",
      formLabelAlign: {
        tel: "",
        username: "",
        password: "",
        user_id: "" //随机生成六位数字
      },
      post: [],
      passForm: {
        oldPass: "",
        newPass: "",
        checkPass: "",
        show: {
          old: false,
          new: false,
          check: false
        }
      }
    };
  },
  watch: {
    $route() {
      console.log("路由发生改变");
      this.fun();
    }
  },
  methods: {
    reset() {
      //返回上一页
      window.history.back();
    },

    checkCSCParam(e) {
      //判断用户是否输入了用户名
      if (e.target.value == "") {
        this.$message({
          message: "请输入用户名",
          type: "warning"
        });
        return;
      }
      //获取用户名
      let username = this.formLabelAlign.username;
      let formData = new FormData();
      formData.append("username", username);
      // console.log(username);
      this.$axios
        .post(php+"user_id.php", formData)
        .then(res => {
          // console.log(res.data);
          //   console.log(res);
          if (res.data.code == 404) {
            this.$message({
              message: "用户名已存在",
              duration: 1500,
              type: "error"
            });
            // //返回上一页
            // window.history.back();
            return;
          } else {
            this.$message({
              message: "可以注册",
              type: "success",
              duration: 1000
            });
          }
        });
    },

    submitForm(event) {
      let number = Math.floor(Math.random() * 1000000 + 100000);
      let formData = new FormData();
      //获取表单数据
      formData.append("username", this.formLabelAlign.username);
      formData.append("tel", this.formLabelAlign.tel);
      formData.append("password", this.formLabelAlign.password);
      formData.append("user_id", number);
         //判断表单数据是否为空，如果为空，则提示用户
      if (
        this.formLabelAlign.username == "" ||
        this.formLabelAlign.tel == "" ||
        this.formLabelAlign.password == "" ||
        this.formLabelAlign.tel == ""
      ) {
        this.$message({
          message: "请填写完整信息",
          type: "warning"
        });
        //终止代码往下执行
        return;
      }
      //判断用户输入的联系方式是否合法
      let tel = this.formLabelAlign.tel;
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(tel)) {
        this.$message({
          message: "请输入正确的联系方式",
          type: "warning"
        });
        return;
      }
      
      //阻止表单默认提交
      event.preventDefault();

      this.$axios
        .post(php+"user_add.php", formData)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              message: "恭喜用户注册成功",
              type: "success"
            });
            //返回上一页
            window.history.back();
          } else {
            this.$message({
              message: "注册失败。请稍后再试",
              type: "error"
            });
          }
        });
   

    }
  }
};
</script>
